/*
 * @Author: liu.ff 
 * @Date: 2018-09-11 15:16:02 
 * @Last Modified by: liu.ff
 * @Last Modified time: 2018-09-12 16:39:54
 */

import React, {Component} from 'react';
import {
	Platform,
	StyleSheet,
	View,
	Text,
	ScrollView,
	AlertIOS,
	Image,
	TouchableOpacity,
} from 'react-native';
//**************************************** 资源导入 ****************************************//
import MineCell from "./LFMineCell";
import {LFImages} from "../../src/img";
import {ScreenFixH, ScreenH, ScreenW, ScreenFixW} from "../../Common/Tools/Scale2Size";
import {LFColors} from "../../Common/Tools/LFColors";


//**************************************** 组件部分 ****************************************//
/**
 * 主视图
 */
export default class Mine extends Component {


	render() {
		return (
			<ScrollView style={styles.baseView} showsVerticalScrollIndicator={false}>
				<HeadView/>
				<BodyView/>
			</ScrollView>
		)
	}

}


/**
 * 头部视图
 */
class HeadView extends Component {

	constructor(props) {
		super(props);
		this.state = {
			userName: '用户名',
			bottomItemArr: [
				{'title': '100', 'description': '转发'},
				{'title': '12', 'description': '评价'},
				{'title': '89', 'description': '收藏'}
			],
		};
	}

	componentDidMount() {
		this.setState({
			userName: '天南一号',
		})
	}

	render() {
		return (
			<View style={headView.headBaseView}>
				{/*titleView*/}
				<View style={headView.titleView}>
					<Image source={LFImages.headIconSelf} style={headView.titleView_icon}/>
					<Text style={headView.titleView_title}>{this.state.userName}</Text>
					<Image source={LFImages.avatar_vip} style={headView.titleView_vip}/>
					<Image source={LFImages.icon_cell_rightArrow} style={headView.titleView_arrow}/>
				</View>

				{/*bottomView*/}
				<View style={headView.bottomView}>
					{this.createBottomItemView()}
				</View>
			</View>
		)
	}

	// 创建bottomItem视图
	createBottomItemView() {
		let arr = this.state.bottomItemArr
		var itemArr = []

		for (let i = 0; i < arr.length; i++) {
			let data = arr[i]
			itemArr.push(
				<TouchableOpacity key={i} onPress={() => {
					this.bottomItemClick(data['description'])
				}}>
					<View key={i} style={{
						justifyContent: 'center',
						justifyContent: 'center',
						alignItems: 'center',
						width: ScreenW / arr.length
					}}>
						<Text style={{color: '#fff', fontSize: 12}}>{data['title']}</Text>
						<Text style={{color: '#fff', fontSize: 12}}>{data['description']}</Text>
						{this.createLine(i)}
					</View>
				</TouchableOpacity>
			)
		}
		return (itemArr)
	}

	// 头部视图三个按钮方法
	bottomItemClick(description) {
		AlertIOS.alert(description)
	}

	// 判断并创建 bottomItem视图的侧边line
	createLine(index) {
		if (index != this.state.bottomItemArr.length - 1) {
			return (
				<View style={{
					height: ScreenFixH(30),
					width: 1,
					backgroundColor: '#fff',
					position: 'absolute',
					alignSelf: 'flex-end'
				}}/>
			)
		}
	}


}


/**
 * body视图
 */
class BodyView extends Component {

	constructor(props) {
		super(props)
		this.state = {
			items: [
				{'img': LFImages.order1, 'des': '待付款'},
				{'img': LFImages.order2, 'des': '待使用'},
				{'img': LFImages.order3, 'des': '待评价'},
				{'img': LFImages.order4, 'des': '退款/售后'},
			],

		}
	}

	render() {
		return (
			<View style={bodyView.bodyBaseView}>


				{/*我的订单*/}
				<MineCell marginTopHeight={10} leftImage={LFImages.collect} leftTitleName={'我的订单'} isBottomLine={true}
				          rightTitleName={'查看全部订单'} cellSelectBlock={this.cellSelected.bind(this, 1)}/>

				{/*bodyMiddleItemView中间视图*/}
				{this.createMiddleItemView()}

				{/*钱包*/}
				<MineCell marginTopHeight={20} leftImage={LFImages.draft} leftTitleName={'钱包'} isBottomLine={true}
				          rightTitleName={'账户余额:100'} cellSelectBlock={this.cellSelected.bind(this, 2)}/>
				{/*抵用券*/}
				<MineCell marginTopHeight={0} leftImage={LFImages.like} leftTitleName={'抵用券'} isBottomLine={false}
				          rightTitleName={'10张'} cellSelectBlock={this.cellSelected.bind(this, 3)}/>
				{/*积分商城*/}
				<MineCell marginTopHeight={15} leftImage={LFImages.card} leftTitleName={'积分商城'} isBottomLine={false}
				          cellSelectBlock={this.cellSelected.bind(this, 4)}/>
				{/*今日推荐*/}
				<MineCell marginTopHeight={15} leftImage={LFImages.new_friend} leftTitleName={'今日推荐'}
				          isBottomLine={false} rightImage={LFImages.me_new}
				          cellSelectBlock={this.cellSelected.bind(this, 5)}/>
				{/*我要合作*/}
				<MineCell marginTopHeight={15} leftImage={LFImages.pay} leftTitleName={'我要合作'} isBottomLine={false}
				          rightTitleName={'轻松开店,我要合作'} cellSelectBlock={this.cellSelected.bind(this, 6)}/>
			</View>
		)
	}

	// 创建cell中间item视图
	createMiddleItemView() {
		let arr = this.state.items
		var itemsArr = []
		for (let i = 0; i < arr.length; i++) {
			let data = arr[i]
			itemsArr.push(
				<TouchableOpacity key={i} onPress={()=>this.middleItemClikc(data['des'])}>
					<View key={i} style={{
						justifyContent: 'center', alignItems: 'center', width: ScreenW / arr.length,
						paddingTop: ScreenFixH(15), paddingBottom: ScreenFixH(15)
					}}>
						<Image source={data['img']} style={{width: ScreenFixW(34), height: ScreenFixH(24)}}/>
						<Text style={{
							marginTop: ScreenFixH(5),
							color: LFColors.textCellColor,
							fontSize: 13
						}}>{data['des']}</Text>
					</View>
				</TouchableOpacity>
			)
		}
		return (
			<View style={{flexDirection: 'row', backgroundColor: '#fff'}}>
				{itemsArr}
			</View>
		)
	}

	// 重点四块功能按钮点击方法
	middleItemClikc(title){
		AlertIOS.alert(title)
	}


	// cell点击方法
	cellSelected(tag) {
		AlertIOS.alert(' ' + tag)

	}
}


//**************************************** 样式部分 ****************************************//
/**
 * 主样式
 */
const styles = StyleSheet.create({
	baseView: {
		flex: 1,
	},

})

/**
 * 头部样式
 */
const headView = StyleSheet.create({
	headBaseView: {
		width: ScreenW,
		height: ScreenFixH(64 + 100),
		backgroundColor: LFColors.mineHeadBackgroundColor,
		paddingTop: 44,
	},
	titleView: {
		flexDirection: 'row',
		alignItems: 'center',
		width: ScreenW,
		height: ScreenFixH(80),
		paddingLeft: ScreenFixW(15),
		paddingRight: ScreenFixW(15),
	},
	titleView_icon: {
		width: ScreenFixW(64), height: ScreenFixW(64),
		borderWidth: 1, borderColor: '#fff', borderRadius: ScreenFixW(32)
	},
	titleView_title: {
		color: '#fff', marginLeft: ScreenFixW(10)
	},
	titleView_vip: {
		width: ScreenFixW(17), height: ScreenFixW(17)
	},
	titleView_arrow: {
		width: ScreenFixW(10), height: ScreenFixW(10),
		position: 'absolute',
		marginLeft: ScreenFixW(ScreenW - 25)
	},
	bottomView: {
		flexDirection: 'row',
		justifyContent: 'space-around',
		alignItems:'center',
		backgroundColor: 'rgba(255,255,255,0.4)',
		width: ScreenW,
		height: ScreenFixH(40),

	},

})

/**
 * body样式
 */
const bodyView = StyleSheet.create({
	bodyBaseView: {
		flex: 1,
		height: ScreenH - ScreenFixH(64 + 100),
	}
})